<template>
  <el-select
    :value="value"
    :disabled="disabled"
    filterable
    :remote-method="remoteMethod"
    remote
    placeholder="请选择"
    :multiple="multiple"
    :style="{width: width}"
    @input="input"
    @focus="focus($event)"
    @clear="clear($event)"
    @blur="blur($event)"
    @change="select($event)"
    @visible-change="open"
  >
    <div class="flex flex-row  select_title" style="padding-left: 20px">
      <div class="fl1">商品编码</div><div class="fl2">商品名称</div><div class="fl1">箱装量</div><div class="fl1">可用量</div><div class="fl1">可用辅数量</div><div class="fl1">单价</div>
      <div class="fl1">箱价</div>
    </div>
    <el-option v-if="list.length==0" value="0" label="暂无数据" :disabled="true" />
    <el-option
      v-for="(item,index) in list"
      :key="item.goodsId"
      :label="item.goodsName"
      :value="item.goodsId"
    >
      <div  :class="{'rowOne':(index % 2)}" class="flex flex-row select_customer_li">
        <div class="fl1">{{ item.goodsCode }}</div><div class="fl2">{{ item.goodsName }}</div><div class="fl1">{{ item.boxUnitCount }}</div>
        <div class="fl1">{{ item.usableNum }}</div><div class="fl1">{{ computedNum(item) }}</div><div class="fl1">{{ item.taxPrice }}</div><div class="fl1">{{ item.taxBoxPrice }}</div>
      </div>
      <!--      <span style="float: right; color: #8492a6; font-size: 12px;padding-left:14px">{{ item.usableNum }}</span>-->
      <!--      <span style="float: right; color: #8492a6; font-size: 12px;padding-left:14px">{{ item.model }}</span>-->
      <!--      <span style="float: right; color: #8492a6; font-size: 12px;padding-left:14px">{{ item.material }}</span>-->
      <!--      <span style="float: right; color: #8492a6; font-size: 12px;padding-left:14px">{{ item.category }}</span>-->
      <!--      <span style="float: right; color: #8492a6; font-size: 12px;padding-left:14px">{{ item.productTypeName }}</span>-->
    </el-option>
    <el-pagination
      v-if="list.length!==0"
      :current-page.sync="page"
      :page-size="size"
      layout="prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-select>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'JtgSelectPlus',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: {
      type: [String, Number, Array],
      default: null
    },
    typeNum: {
      type: [String, Number, Array],
      default: 1
    },
    initValue: {
      type: [String, Number],
      default: null
    },
    productTypeId: {
      type: [String, Number, Array, Object],
      default: null
    },
    ignoreSourceTypes: {
      type: [String, Number, Array, Object],
      default: null
    },
    contractNo: {
      type: [String, Number, Array, Object],
      default: null
    },
    url: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    sourceType: {
      type: [String],
      default: ''
    },
    deptId: {
      type: [String, Number, Array, Object],
      default: null
    },
    productId: {
      type: [String, Number, Array, Object],
      default: null
    },
    warehouseId: {
      type: [String, Number, Array, Object],
      default: null
    },
    hasUsableNum: {
      type: [String, Number, Array, Object],
      default: null
    },
    typeName: {
      type: [String, Number, Array, Object],
      default: null
    },
    ignoreId: {
      type: [String, Number],
      default: null
    },
    type: {
      type: [String, Number, Array, Object],
      default: null
    },
    customerId: {
      type: [String, Number, Array, Object],
      default: null
    },
    buyChannel: {
      type: [String, Number, Array, Object],
      default: null
    },
    multiple: {// 下拉框配置
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isChange: false,
      event: '',
      isPan: false,
      query: undefined,
      list: ['1', '2', '3'],
      multipleData: [],
      page: 1,
      size: 10,
      api: 'api/dropDown/basGoodsListForAdd',
      total: 0
    }
  },
  watch: {
    value() {
      this.value = 0 ? '' : this.value
      this.event = this.value
      if (!this.multiple) {
        if (this.value && this.list.length < 1) {
          this.list = [{ goodsId: this.value, goodName: this.initValue }]
          this.total = 1
        }
        this.remoteMethod(this.initValue)
      }
    },
    ignoreSourceTypes: { // 监听图片变化
      handler(newVal, oldVal) {
        // console.log(newVal,oldVal)
        if (newVal) {
          this.ignoreSourceTypes = newVal
          this.remoteMethod()
        }
      }
    },
    productTypeId: { // 监听图片变化
      handler(newVal, oldVal) {
        // if (newVal) {
        if (!newVal && oldVal) {
          this.input(null)
        }
        this.productTypeId = newVal
        this.remoteMethod()
        // }
      },
      immediate: true
    }
  },
  beforeUpdate() {
    if (!this.multiple) {
      if (this.value && this.list.length < 1) {
        this.list = [{ goodsId: this.value, goodName: this.initValue }]
        this.total = 1
      }
    }
  },
  created() {
    if (this.multiple && this.productTypeId) {
      this.remoteMethod()
    }
    if (!this.multiple) {
      if (this.value && this.list.length < 1) {
        this.list = [{ goodsId: this.value, goodName: this.initValue }]
        this.event = this.value
        this.total = 1
      }
    }
  },
  methods: {
    // 获取远程数据并赋值
    remoteMethod(query) {
      if (query !== '') {
        if (query !== undefined) {
          this.query = query
        } else {
          this.query = undefined
        }
        console.log('this.type', this.type)
        request({
          url: this.api,
          method: 'GET',
          params: {
            type: this.type == null ? this.typeName : this.type == 2 ? 'SALE_RETURN' : 'SALE',
            customerId: this.customerId,
            keyword: this.query,
            buyChannel: this.buyChannel,
            page: this.page,
            size: this.size
          }
        }).then(res => {
          // console.log('jtg-select-remoteMethod-res',res)
          if (res.content) {
            // this.list.model = res.content
            this.list = res.content
            this.list.map(item => {
              if (!item.goodsId && item.contractNo) {
                item.goodsName = item.contractNo
                item.goodsId = item.contractNo
              }
            })
            this.total = res.totalElements
            if (this.multiple) this.mulitpleData()
            // console.log(this.list[0].name)
          }
        }).catch(e => {
          this.list = []
          this.query = undefined
        })
      } else {
        this.query = undefined
        this.list = []
      }
      if (this.query != undefined) {
        this.$emit('remoteMethod', this.query)
      }
    },
    computedNum(goods){
      const boxCount = parseInt(goods.usableNum/Number(goods.boxUnitCount))
      const mainCount = goods.usableNum%Number(goods.boxUnitCount)
      return `${boxCount}${goods.boxUnitName}${mainCount}${goods.mainUnitName}`
    },
    // 多选赋值
    mulitpleData() {
      const init_json = JSON.parse(this.initValue)
      if (init_json) {
        const ids = this.list.map(item => item.goodsId)
        init_json.forEach((item) => {
          if (!ids.includes(item.goodsId) && this.page === 1) {
            this.list.push({ goodsId: item.goodsId, goodsName: item.goodsName })
          }
        })
      }
      if (this.multipleData.length !== this.total && this.multipleData.length !== this.list.length) {
        this.list.map(item => {
          this.multipleData.push(item)
        })
      }
    },
    // 改变分页数值触发
    handleSizeChange(val) {
      this.limit = val
      this.isPan = true
      this.value = this.query
      this.remoteMethod(this.query)
    },
    handleCurrentChange(val) {
      this.page = val
      this.isPan = true
      this.value = this.query
      this.remoteMethod(this.query)
    },
    // 获取当前选中的值
    input(event) {
      this.isChange = true
      let data = null
      if (this.multiple) {
        data = this.multipleData.filter(item => event.find(e => item.goodsId === e))
      } else {
        data = this.list.find(item => item.goodsId === event)
      }
      this.$emit('input', event)
      this.$emit('change', data, data.goodsName)
      // this.isChange = true
      this.isPan = false
    },
    open() {
      this.page = 1
      this.query = undefined
      if (!this.isChange) {
        this.$emit('remoteMethod', '')
        this.isChange = true
        this.isPan = false
      } else {
        this.$emit('remoteMethod', this.event)
        this.isChange = false
        this.isPan = true
      }
      this.remoteMethod()
    },
    focus(e) {
      // this.isChange = false
      this.isPan = false
    },
    select(e) {
      this.event = e
      console.log('goodsName', e)
      // console.log('select--e', e)
      // console.log('select--this.list', this.list)
      // this.query = ''
      this.list.map(item => {
        if (item.goodsId === e) {
          this.$emit('getChangeInfo', item)
        }
      })
    },
    blur(e) {
      if (this.isPan) {
        this.isChange = true
        this.isPan = false
        this.$emit('remoteMethod', this.event)
      } else {
        // this.isChange = false
      }
    },
    clear(e) {
      this.query = undefined
      this.page = 1
      this.remoteMethod()
    }
  }
}
</script>

<style lang="scss" scoped>
.crud-opts {
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.flex{
  display: flex;
}
.flex-row{
  flex-direction: row;
}
.fl1{
  width: 150px;
  overflow: hidden;
}
.select_title{
  height: 40px;
div{
  border: rgb(200,200,200) solid 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
}
.select_customer_li{
  border: rgb(200,200,200) 1px solid;
div{
  border: rgb(200,200,200) solid 1px;
}
}
.rowOne{
  background-color: rgba(192,250,233,0.3);
}
.fl2{
  width: 200px;
  overflow: hidden;
}
</style>
